<template>
  <view>
    <view class="revenList flex justify-between">
      <view class="border-10" style="width: 187rpx;height: 73rpx; background-color: #363f51;"
        v-for="(item,index) in operatorList" :key="index" :class="{'active':current === index}" @click="checked(index)">
        {{item.title}}
      </view>
    </view>
    <view v-if="current=== 0">
      <block v-if="flag">
        <adapay :merchantId="merchantId"></adapay>
      </block>
    </view>
    <view v-if="current=== 1">
      <walletSummary :merchantId="merchantId"></walletSummary>
    </view>
    <view v-if="current=== 2">
      <revenue :merchantId="merchantId"></revenue>
    </view>
  </view>
</template>

<script>
  import adapay from '@/carrierDetail/detail/components/adapay.vue'
  import walletSummary from '@/carrierDetail/detail/components/walletSummary.vue'
  import revenue from '@/carrierDetail/detail/components/revenue.vue'
  export default {
    components: {
      adapay,
      walletSummary,
      revenue
    },
    data() {
      return {
        flag: false,
        merchantId: null,
        operatorList: [{
            index: '1',
            title: '支付设置'
          },
          {
            index: '2',
            title: '钱包汇总'
          },
          {
            index: '3',
            title: '营收报表'
          }
        ],
        current: 0,
      };
    },
    methods: {
      checked(index) {
        this.current = index
        // this.text = this.operatorList[index].title
        console.log('营收页面', this.current);
      },
    },
    onLoad(option) {
      // console.log(option.id, '接收值');
      this.merchantId = option.id
      if (this.merchantId != null) return this.flag = true
    }
  }
</script>

<style lang="scss">
  .revenList {
    padding: 40rpx 34rpx 0 37rpx;
    text-align: center;
    line-height: 72rpx;
  }

  .active {
    position: relative;
    // color: #fff;
    // border-radius: 10rpx;
    background-color: #040f26 !important;
    // background-color: red !important;
  }
</style>